<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>会员卡</title>
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript"  src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="member.css">
  <script type="text/javascript" src="./static/store.legacy.min.js"></script>
  <script src="./static/util.js"></script>
</head>
<body>
  <header>
    <div class="headerSwipper">
      <div class="headerSwipper_div">
        <div class="headerSwipper_div_iconview">
          <img src="./static/images/logo.png" alt="">
        </div>
        <div class="headerSwipper_div_myicon">
          <!-- <img src="" alt=""> -->
          <span class="loginText">登录</span>
          <div class="headerSwipper_div_myicon_icon" style="display: none">
            <img src="./static/images/iconsmall.png" alt="">
          </div>
          <div class="headerSwipper_div_myicon_info">
            <ul>
              <li class="headerSwipper_div_myicon_info_li">消息</li>
              <li class="headerSwipper_div_myicon_info_li">退出</li>
            </ul>
          </div>
        </div>
        <ul class="headerSwipper_div_ul">
          <li class="headerSwipper_div_li mobileapp">手机APP</li>
          <li class="headerSwipper_div_li vipprop">开通VIP</li>
        </ul>
      </div>
    </div>
  </header>
  <section>
    <div class="memberImgview">
      <div class="memberCard">
        <div class="leftimgview">
          <img class="leftimgview_img" src="./static/images/memberCard.png" alt="">
          <div class="memberTextView">
            <span class="memberCard_title">会员卡</span>
            <span class="memberCard_text">陪伴高考每一天</span>
          </div>
        </div>
        <div class="whiteview">
          <p class="whiteview_title">会员卡</p>
          <div class="statuMember">
            
          </div>
          <p class="whiteview_buybtn">立即预定</p>
          <ul class="whiteview_ul">
            <li class="whiteview_li">可查看院校选择，志愿填报，专业查看，问题提问。</li>
            <li class="whiteview_li"></li>
          </ul>
          <div class="qrweixin">
            <img class="weixinzhifuqr" src="" alt="">
            <span>微信扫码支付</span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="listsview">
      <div class="listviewSwipper">
        <p class="listsview_title">特色功能</p>
        <p class="listsview_vicetitle">全方位分析深度解读每个机会</p>
        <div class="listCircleview">
          <div class="positioncircle">
            <div class="circle">
              <div class="circleSmall"></div>
            </div>
            <div class="listCircleImg">
              <img src="./static/images/computer.png" alt="">
            </div>
            <div class="positionhexagonview zerodeg">
              <div class="hexagonview">
                <span class="hexagonview_span">志愿填报</span>
              </div>
            </div>
            <div class="positionhexagonview sixtydeg">
              <div class="hexagonview">
                <span class="hexagonview_span">院校搜索</span>
              </div>
            </div>
            <div class="positionhexagonview tsixtydeg">
              <div class="hexagonview">
                <span class="hexagonview_span">单独招生</span>
              </div>
            </div>
            <div class="positionhexagonview ttsixtydeg">
              <div class="hexagonview">
                <span class="hexagonview_span">自主招生</span>
              </div>
            </div>
            <div class="positionhexagonview tttsixtydeg">
              <div class="hexagonview">
                <span class="hexagonview_span">高考资讯</span>
              </div>
            </div>
            <div class="positionhexagonview ttttsixtydeg">
              <div class="hexagonview">
                <span class="hexagonview_span">专业大全</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="footerSwipper">
      <div class="footerSwipper_div">
        <ul class="footerSwipper_div_ul">
          <span class="footerSwipper_div_ul_span"><a href="./index.html">首页</a></span>
          <li class="footerSwipper_div_ul_li"><a href="./schools.html?keyword=">院校大全</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./major.html">专业大全</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./mentality.html">心理辅导</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./careerPlanning.html">职业规划</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./infoTest.html">高考资讯</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./recruitment.html?type=1">自主招生</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./recruitment.html?type=2">单独招生</a></li>
        </ul>
        <ul class="footerSwipper_div_ul">
          <span class="footerSwipper_div_ul_span">学习提升</span>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=3">微课</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=4">模拟试题</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=5">往届试题</a></li>
        </ul>
        <ul class="footerSwipper_div_ul">
          <span class="footerSwipper_div_ul_span">志愿填报</span>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=6">咨询</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./mobileapp.html">下载APP</a></li>
        </ul>
        <!-- 扫一扫关注我们区域 -->
        <div class="QRcodeSwipper">
          <span class="QRcodeSwipper_span">扫一扫关注我们</span>
          <div class="QRcodeSwipper_imgview">
            <img src="./static/images/qr.png" alt="">
          </div>
        </div>
        <!-- 中间信息区域 -->
        <div class="middleInfo">
          <span class="middleInfo_span_city">中国·河南·郑州</span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon middleInfo_span_GE_icon_special phone_icon"><img src="./static/images/phone.png" alt=""></span><span class="middleInfo_span_GE_text middleInfo_span_GE_text_color">0371-68064945</span></span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon message_icon"><img src="./static/images/message.png" alt=""></span><span class="middleInfo_span_GE_text">595879735@qq.com</span></span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon message_icon"><img src="./static/images/store.png" alt=""></span><span class="middleInfo_span_GE_text">河南柒佰伴教育信息咨询有限公司
          </span></span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon middleInfo_span_GE_icon_special address_icon"><img src="./static/images/address.png" alt=""></span><span class="middleInfo_span_GE_text middleInfo_span_GE_text_special">郑州市郑东新区立体世界
            </span></span>
        </div>
        <p class="footerSwipper_div_p">河南世霖网络软件科技 2014-2018 豫ICP备14010456号-1</p>
      </div>
    </div>
  </footer>
  <script src="./static/util.js">
  </script>
  <script>
    $(document).ready(function(){
      // 初始化隐藏二维码
      // 登录隐藏
      $('.headerSwipper_div_myicon_info').hide()
      $('.qrweixin').hide()
      // 初始化显示
      $.ajax({
        url: urlhost + '/admin.php/api/homepage/card_info',
        method: 'POST',
        success: function (res) {
          console.log(res)
          var html_buyBtn = '<p class="whiteview_priceview">价格:<span class="price">￥'+ res.data.money +'</span></p>'
          $('.whiteview_ul').find('li').eq(1).html('有效期'+ res.data.start_time + '至' + res.data.end_time)
          Resever(html_buyBtn)
        }
      })
      $('.headerSwipper_div_myicon_info').hide()
      // 鼠标移动到头像事件
      $('.headerSwipper_div_myicon').mouseenter(
        function () {
          $('.headerSwipper_div_myicon_info').show()
        }
      )
      $('.headerSwipper_div_myicon').mouseleave(
        function () {
          $('.headerSwipper_div_myicon_info').hide()
        }
      )
      var zhifuinfo
      // 点击立即预定事件
      $('.memberCard').on('click', '.whiteview_buybtn', function() {
        // Resever(html_cardNum)
        // $(this).remove()
        $.ajax({
          url: urlhost + '/admin.php/api/homepage/cards_sub',
          method: 'POST',
          success: function (res) {
             console.log(res.code)
            //  if(res.code == 0) {
               zhifuinfo = res.data
               // console.log(infoinfo)
               var html_zhifuBtn = '<span class="zhifubao" style="display:inline-block;width:50%;height:100%;line-height:45px;text-align:center;background:#05b2f7;float:left;">支付宝支付</span><span class="weixin" style="display:inline-block;width:50%;height:100%;line-height:45px;text-align:center;background:#05cc65;float:right;">微信支付'
               $('.whiteview_buybtn').empty()
               $('.whiteview_buybtn').html(html_zhifuBtn)
            //  }else {
            //    widowAle(res.msg)
            //  }
           
          }
        })
      })
      // 监听支付宝事件
      $('.whiteview_buybtn').on('click','.zhifubao',function (e) {
        console.log(zhifuinfo)
        e.stopPropagation()
        console.log('支付宝')
        $.ajax({
          url: urlhost + '/admin.php/api/Webpay/alipayurl',
          method: 'POST',
          data: {
            order_sn: zhifuinfo.order_sn,
            card_sn: zhifuinfo.card_sn,
            uid: zhifuinfo.uid
          },
          success: function (res) {
            console.log(res.data)
            window.open(res.data)
          }
        })
      })

      // 监听微信事件
      $('.whiteview_buybtn').on('click','.weixin',function (e) {
        e.stopPropagation()
        console.log('微信')
        $.ajax({
          url: urlhost + '/admin.php/api/Webpay/pc_wxpay',
          method: 'POST',
          data: {
            order_sn: zhifuinfo.order_sn,
            card_sn: zhifuinfo.card_sn,
            uid: zhifuinfo.uid
          },
          success: function (res) {
            console.log(res.data)
            // 显现二维码区域
            $('.qrweixin').show()
            if(res.data) {
              $('.qrweixin').find('img').attr('src','http://qr.liantu.com/api.php?text=' + res.data)
            }
          }
        })
      })

      // 动态监听用户付款信息
      if(store.get('uid')) {
        // 登录过的用户
        var info = store.get('info')
        $('.whiteview_buybtn').text('已购买')
      }
      var issuccess =  setInterval(function() {
        if(!store.get('uid')) {
          $.ajax({
            url: urlhost + '/admin.php/api/index/card_info',
            method: 'POST',
            data: {
              order_sn: zhifuinfo.order_sn,
              uid: zhifuinfo.uid
            },
            success: function (res) {
              if(res.data.buy_status == 1) {
                $('.whiteview_buybtn').hide()
                widowAle('购买成功')
                Resever(html_cardNum)
                clearInterval(issuccess)
                $('.statuMember').find('.whiteview_priceview_inputview_input').eq(0).val(res.data.card_sn)
                $('.statuMember').find('.whiteview_priceview_inputview_input').eq(1).val(res.data.card_pws)
                $.ajax({
                  url: urlhost + '/admin.php/api/index/index',
                  method: 'POST',
                  data: {
                    username: res.data.card_sn,
                    card_pws: res.data.card_pws
                  },
                  success: function (res2) {
                    if(res2.code == 0) {
                      store.set('uid', res2.data.uid)
                      store.set('info',res2.data)
                      widowAle('自动登录成功')
                    }
                  }
                })
              }
            }
          })
        }else {
          
        }
      },3000)
      // 修改密码
      $('.whiteview').on('click','.editview',function (e) {
        e.stopPropagation()
        var passchange = $('.statuMember').find('.whiteview_priceview_inputview_input').eq(1).val()
        if(store.get('uid')) {
          $.ajax({
            url: urlhost + '/admin.php/api/index/forgetPwd',
            method: 'POST',
            data: {
              uid: store.get('uid'),
              card_pws: passchange
            },
            success: function (res) {
              widowAle(res.msg)
            }
          })
        }
      })


      // 点击预定事件方法
      // statuMember
      // <p class="remindertext">已到期</p> 已经到期提示
      
      var html_cardNum = "<p class=\"whiteview_priceview\">\n              <p class=\"whiteview_priceview_inputview\">\n                卡号:\n                <input type=\"text\" class=\"whiteview_priceview_inputview_input\" placeholder=\"123456\">\n              </p>\n              <p class=\"whiteview_priceview_inputview nonebottom\">\n                密码:\n                  <input type=\"text\" class=\"whiteview_priceview_inputview_input\" placeholder=\"123456\">\n                  <span class=\"editview\"><img class=\"editview_img\" src=\"./static/images/editIcon.png\" alt=\"\"></span>\n              </p>\n            </p>";
      var html_expire = '<p class="remindertext">已到期</p>'
      // 修改html参数 方法 data 返回的数据 type 是否购买过会员卡
      function htmlStructure (data, type) {
        // 动态的改变上述的html值 使得不同的显示对应不同
      }


      // 重置会员卡显示内容 传入html
      function Resever (html) {
        $('.statuMember').html('')
        $('.statuMember').html(html)
      }
      
    })
  </script>
  </body>
</html>